<template>
  <div>
    <el-row :gutter="14">
      <DataCard :card-list="tocardList" />
      <ChartCard :chart-data="buyTrendData" :opt="{reportType:'line'}" :chart-card-name="titleList.lineName" :is-stock="isStock" @sendType="sendType" />
      <TableCard :url="buyGoodUrl" :conditions="conditions" :size="size" :stripe="true" :table-card-name="titleList.commodityName" :close-seven="closeSeven" />
      <TableCard :url="buySupplierUrl" :conditions="conditions" :size="size" :stripe="true" :table-card-name="titleList.supplierName" :close-seven="closeSeven" />
      <ChartCard :chart-data="buyOrderPriceRateData" :opt="{reportType:'pie'}" :chart-card-name="titleList.pieName" :close-seven="closeSeven" />
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DataCard from '../components/DataCard'
import ChartCard from '../components/ChartCard'
import TableCard from '../components/TableCard'
import url from '@/api/url'

export default {
  components: {
    DataCard,
    ChartCard,
    TableCard,
  },
  data() {
    return {
      buyGoodUrl: url.buyGoodsRanking, // 商品进货排行
      buySupplierUrl: url.buySupplierRanking, // 进货供应商排行
      closeSeven: true, // 近7天
      isStock: true // 进货金额判断
    }
  },
  computed: {
    ...mapState('operation', [
      'storageTimeData', // 库龄数据
      'conditions',
      'size',
      'buyList', // 进货顶端数据
      'buyTrendData', // 进货趋势
      'buyOrderPriceRateData', // 进货订单单价比率
    ]),
    tocardList(state) { // 进货顶端数据
      const {buyList} = state
      return [
        {text: this.$t('manage.monthBuyAmount'), amount: buyList.monthBuyAmount},
        {text: this.$t('manage.monthBuyOrderPrice'), amount: buyList.monthBuyOrderPrice},
        {text: this.$t('manage.monthBuyOrderTotal'), amount: buyList.monthBuyOrderTotal, number: true},
        {text: this.$t('manage.monthBuySupplierPrice'), amount: buyList.monthBuySupplierPrice},
        {text: this.$t('manage.monthBuySupplierTotal'), amount: buyList.monthBuySupplierTotal, number: true},
        {text: this.$t('manage.yesterdayBuyAmount'), amount: buyList.yesterdayBuyAmount},
      ]
    },
    titleList() {
      return {
        lineName: this.$t('manage.lineName'),
        commodityName: this.$t('manage.commodityName'),
        supplierName: this.$t('manage.supplierName'),
        pieName: this.$t('manage.pieName'),
      }
    }
  },
  mounted() {
    this.$store.dispatch('operation/getBuyKpi') // 顶端数据
    this.$store.dispatch('operation/getBuyTrend', {type: 'day'}) // 进货趋势
    this.$store.dispatch('operation/getBuyOrderPriceRate') // 进货订单单价比率
  },
  methods: {
    sendType(type) {
      this.$store.dispatch('operation/getBuyTrend', {type}) // 进货趋势
    },
  }
}
</script>

<style scoped lang="scss">
    @import '../components/style'
</style>
